<template>
  <span :class="className" :value="str">{{ id }}: {{ fn() || "未完成" }}</span>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
    },
    status: {
      type: [String, Boolean],
    },
  },
  data() {
    return {
      className: "",
      str: "未完成",
    };
  },
  methods: {
    fn() {
      if (!this.status) return this.str;
      else {
        if (this.status === "right") {
          this.className = "right";
          this.str = "正确";
          return "正确";
        } else if (this.status === "error") {
          this.className = "error";
          this.str = "错误";
          return "错误";
        } else {
          this.className = "undo";
          this.str = "未完成";
          return "未完成";
        }
      }
    }
  },
  
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>
